<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" lang="zh">
<head>
    <th:block th:include="common/head::head"/>
    <style>

        .context {
            height: 90vh;
        }
    </style>
</head>

<body>
<div class="layui-row">
    <div class="layui-col-md3">
        <div id="tree"></div>
    </div>
    <div class="layui-col-md9">
        <div>当前查看：<span id="nowFileName"></span></div>
        <textarea name="context" id="logContext" placeholder="选择查看的文件" readonly disabled
                  class="layui-textarea context"></textarea>
    </div>
</div>
</body>
<script type="text/javascript"
        th:src="@{${session.jpomProxyPath}+'/static/js/auto-line-number.js?v='+${session.staticCacheTime}}"></script>
<script type="text/javascript">
    var ws;
    var url = getSocketHost() + "/tomcat_log?userId=[[${session.user.getUserMd5Key()}]]&tomcatId=[[${id}]]&nodeId=[[${node.id}]]&type=tomcat";
    var treeData = [];
    var tree;

    function loadSuccess() {
        var logContext = $("#logContext");
        initPlugin();
        layui.use(['tree'], function () {
            tree = layui.tree;
            //获取日志列表
            loadingAjax({
                url: './getLogList',
                data: {
                    id: '[[${id}]]'
                },
                success: function (data) {
                    treeData = data.data;
                    loadTree(treeData);
                }
            });

            //渲染树
            function loadTree(data) {
                tree.render({
                    elem: '#tree',
                    data: data,
                    id: "tomcatTreeId",
                    edit: ['del', 'add'],
                    click: function (obj) {
                        if (obj.data.children) {
                            return;
                        }
                        var title = obj.data.title;
                        $("#nowFileName").text(obj.data.title);
                        if (!obj.data.children) {
                            openSocket(obj.data.path);
                        }
                    },
                    operate: function (obj) {
                        var type = obj.type;
                        var data = obj.data;
                        if (type === 'del') {
                            layer.confirm('确定要删除此日志文件吗？', {
                                title: '系统提示'
                            }, function (index) {
                                layer.close(index);
                                loadingAjax({
                                    url: './deleteFile',
                                    data: {
                                        path: '_tomcat_log',
                                        filename: data.path,
                                        nodeId: "[[${node.id}]]",
                                        id: "[[${id}]]"
                                    },
                                    success: function (data) {
                                        layer.msg(data.msg);
                                        if (200 == data.code) {
                                            setTimeout(function () {
                                                location.reload();
                                            }, 2000)
                                        } else {
                                            reloadTree();
                                        }
                                    }
                                });
                            }, function () {
                                reloadTree();
                            });
                        } else if (type === 'add') {
                            if (data.children) {
                                layer.msg("不支持下载文件夹");
                            } else {
                                var url = "./download?id=[[${id}]]&filename=" + encodeURI(data.path) + "&path=_tomcat_log";
                                url = appendNodeId(url);
                                window.open(url);
                            }
                            reloadTree();
                            return false;
                        }
                    }
                });
            }
        });

        function openSocket(fileName) {
            if (!fileName) {
                return;
            }
            if (!('WebSocket' in window)) {
                layer.msg("不支持WebSocket");
                return;
            }
            logContext.html("");

            if (!ws) {
                ws = new WebSocket(url);
            }
            var item = {
                op: "showlog",
                tomcatId: '[[${id}]]',
                fileName: fileName
            }
            if (ws.readyState != 1 && ws.readyState != 0) {
                ws = new WebSocket(url);
            } else if (ws.readyState == 1) {
                ws.send(JSON.stringify(item));
            }
            ws.onopen = function () {
                ws.send(JSON.stringify(item));
            };
            ws.onmessage = function (data) {
                if (data.data) {
                    logContext.append(data.data + '\r\n');
                    $("textarea").setTextareaCount({
                        width: "30px",
                        bgColor: "#ddd",
                        color: "#000",
                        display: "inline-block"
                    });
                    var h = logContext[0].scrollHeight;
                    logContext.scrollTop(h);
                }
            };
            ws.onerror = function (ev) {
                console.log(ev);
                layer.msg("socket 异常");
            }
            // scrollToBotomm();
        }
    }

    function reloadTree() {
        tree.reload('tomcatTreeId', {
            data: treeData
        });
    }
</script>
</html>
